<template>
  <div class="base-role">
    <div class="page-wrapper">
      <v-container grid-list-xl fluid>
        <v-layout row wrap>
          <v-flex sm12>
            <v-widget title="查询条件">
              <template slot="widget-content">
                <v-container grid-list-xl fluid>
                  <v-layout row wrap>
                    <v-flex md3 sm6 xs12>
                      <v-text-field label="名称"></v-text-field>
                    </v-flex>
                    <v-flex md9 sm12 xs12>
                      <div class="text-right">
                        <v-btn color="green darken-2" class="white--text ma-2" @click="add">
                          <v-icon left>mdi-plus</v-icon>
                          新增
                        </v-btn>
                        <v-btn color="light-blue darken-2" class="white--text ma-2" @click="search">
                          <v-icon left>mdi-magnify</v-icon>
                          查询
                        </v-btn>
                      </div>
                    </v-flex>
                  </v-layout>
                </v-container>
              </template>
            </v-widget>
            <v-data-table
              :headers="headers"
              :items="list"
              :page.sync="pagination.page"
              :items-per-page="pagination.itemsPerPage"
              hide-default-footer
              class="elevation-1"
              @page-count="count = $event"
            >
              <!-- 序号 -->
              <template v-slot:[`item.id`]="{ item }">
                {{
                  pagination.page *
                    list
                      .map(function (x) {
                        return x.id;
                      })
                      .indexOf(item.id) +
                  1
                }}
              </template>
              <!-- 状态 -->
              <template v-slot:[`item.status`]="{ item }">
                {{ item.status === 1 ? '有效' : '无效' }}
              </template>
              <!-- 操作 -->
              <template v-slot:[`item.actions`]="{ item }">
                <v-icon small class="mr-2" @click="edit(item.id)"> mdi-pencil </v-icon>
                <v-icon small class="mr-2" @click="del(item.id)"> mdi-delete </v-icon>
              </template>
            </v-data-table>
            <div class="text-center pt-2">
              <v-pagination v-model="pagination.page" :length="Math.ceil(count / pagination.itemsPerPage)" @input="onPageChange">
              </v-pagination>
            </div>
          </v-flex>
        </v-layout>
      </v-container>
    </div>
    <!-- 新增/编辑Modal -->
    <div class="dialog-form">
      <template>
        <v-row justify="center">
          <v-dialog v-model="dialog.visible" persistent :max-width="dialog.maxWidth">
            <v-card>
              <v-card-title>
                <span class="text-h5">{{ dialog.title }}</span>
              </v-card-title>
              <v-card-text>
                <v-container>
                  <v-form ref="form" v-model="dialog.valid" lazy-validation>
                    <v-layout row wrap>
                      <v-flex md12 sm12 xs12>
                        <v-text-field label="名称" v-model="role.name" :rules="dialog.rules.name"></v-text-field>
                      </v-flex>
                      <v-flex md12 sm12 xs12>
                        <v-textarea label="备注" v-model="role.notes"></v-textarea>
                      </v-flex>
                    </v-layout>
                  </v-form>
                </v-container>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn depressed @click="dialog.visible = false"> 取消 </v-btn>
                <v-btn color="blue darken-1" class="white--text ma-2" @click="submit()"> 
                  <v-icon left>mdi-check</v-icon>
                  保存 
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-row>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import Pagination from '@/types/common/pagination';
import Role from '@/types/dtos/base/role';
import VWidget from '@components/VWidget.vue';
import { Vue, Component, Prop } from 'vue-property-decorator';
import * as uuid from 'uuid';
import service from '@/services/base/role';

@Component({
  components: {
    VWidget,
  },
})
export default class Index extends Vue {
  // data
  role: Role = new Role();
  // 查询条件
  pagination: Pagination = new Pagination();
  model: any = {
    pagination: this.pagination,
  };
  // dialog
  dialog: any = {
    title: '',
    visible: false,
    maxWidth: '600px',
    valueTypes: [
      { text: 'String', value: 0 },
      { text: 'Int', value: 1 },
      { text: 'Boolean', value: 2 },
      { text: 'DateTime', value: 3 },
    ],
    // validation
    valid: true,
    rules: {
      name: [(v:any) => !!v || '必填']
    }
  };
  // Table
  headers: any[] = [
    {
      text: '名称',
      value: 'name',
    },
    {
      text: '备注',
      value: 'notes',
    },
    {
      text: '操作',
      value: 'actions',
    },
  ];

  // 分页列表
  list: Role[] = [];
  // 总数
  count!: number;

  // created
  created(): void {
    // 初始化分页参数count
    this.count = 0;
  }

  // mounted
  async mounted(): Promise<void> {
    await this.search();
  }

  // 查询
  async search(): Promise<void> {
    await service.getPagedList(this.model).then((res: any) => {
      this.count = res.data.count;
      this.list = res.data.list;
    });
  }

  // 新增
  add(): void {
    this.role = new Role();
    this.dialog.title = "新建角色";
    this.dialog.visible = true;
  }

  // 编辑
  async edit(id: string): Promise<void> {
    this.dialog.title = "编辑角色";
    this.dialog.visible = true;
    await service.get(id).then((res: any) => {
      this.role = res.data;
    });
  }

  // 提交
  async submit(): Promise<void> {
    if ((this.$refs.form as Vue & { validate: () => boolean }).validate()) {
      if (!!this.role.id) {
        await service.update(this.role).then((res: any) => {
          if (!!res.data) {
            this.$root.$alert('success', '修改成功');
            this.dialog.visible = false;
            this.role = new Role();
          }
        });
      } else {
        await service.insert(this.role).then((res: any) => {
          if (!!res.data) {
            this.$root.$alert('success', '新增成功');
            this.dialog.visible = false;
            this.role = new Role();
          }
        });
      }
    }

    this.search();
    this.dialog.valid = false;
  }

  // 删除
  del(id: string): void {
    console.log('删除', id);
    this.$root
      .$confirm('确认删除吗？', '删除后数据不可恢复', {
        width: 500,
        okText: '确认',
        okColor: 'primary',
        cancelText: '取消',
        cancelColor: 'default',
      })
      .then((value: boolean) => {
        if (value) {
          // 执行删除操作
          service.delete({ id: id }).then((res: any) => {
            if (!!res.data) {
              this.$root.$alert('success', '删除成功', 3000);
              this.search();
            } else {
              this.$root.$alert('error', '删除失败');
            }
          });
        }
      });
  }

  // 切换分页
  onPageChange(page: number) {
    this.pagination.page = page;
    this.search();
  }
}
</script>

<style lang="scss" scoped>
</style>